<template>
  <el-empty v-if="!forms||forms.length==0" description="请先在前面节点添加表单" />
  <el-card v-else class="form-card" v-for="(form,index) in forms" style="margin-bottom: 15px;padding-bottom: 15px">
    <template #header>
      <div class="card-header">
        <span>{{ form.name }}</span>
        <el-button class="button" text icon="Close" @click="deleteForm(form.id)" v-if="form.nodeId==id">删除</el-button>
      </div>
    </template>
    <div class="line bold" >
      <div class="line-title">表单字段</div>
      <div class="line-body">
       <div class="c1">条件</div><div class="c2">值1</div><div class="c3">值2</div>
      </div>
    </div>
    <div :class="{line : true,'hiss-bg':idx%2==0 }" v-for="(field,idx) in form.fields">
      <div class="line-title">{{field.fieldLabel}}</div>
      <div class="line-body">
        <div class="c1"><el-select
            v-model="field['condition']"
            size="small"
            placeholder="Select"
            style="width: 110px"
        >
          <el-option
              v-for="item in conditions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select></div>
        <div class="c2">
          <el-input v-model="field['conditionValue1']"  style="width: 95px" size="small" placeholder="输入值1" />
        </div>
        <div class="c2"><el-input v-if="field['condition']=='between'" style="width: 95px" size="small" v-model="field['conditionValue2']" placeholder="输入值2" /></div>
      </div>
    </div>
  </el-card>
</template>

<script>

export default {
  name: "FormCondition",
  props:{
    config:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      id:'',
      forms:[],
      conditions:[
        {label:'忽略',value:''},
        {label:'等于',value:'eq'},
        {label:'大于',value:'gt'},
        {label:'大于等于',value:'gte'},
        {label:'小于',value:'lt'},
        {label:'小于等于',value:'lte'},
        {label:'介于',value:'between'},
        {label:'包含',value:'in'},
        {label:'不包含',value:'notIn'}
      ]
    }
  },
  methods: {
    // 保存
    saveForm(){
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      nodeConfig.formConfig=this.forms
      this.config.nodeConfig[this.id] = nodeConfig
    },
    // 初始化表单
    initForm(id){
      this.id = id
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      let tempForms = nodeConfig.formConfig||[]
      if(tempForms.length>0){//删除对于的表单
        let newForms = []
        for (let i = 0; i < tempForms.length; i++) {
          let temp = tempForms[i]
          for (let j = 0; j < this.config.forms.length; j++) {
            let tempG = this.config.forms[j]
            if(tempG.id==temp.id){
              newForms.push(temp)
            }
          }
        }
        tempForms = newForms
      }
      // 填充表单
      for (let i = 0; i < this.config.forms.length; i++) {
        let temp = this.config.forms[i]
        let count=0
        for (let j = 0; j < tempForms.length; j++) {
          let tempF = tempForms[j]
          if(tempF.id==temp.id){
            count++
          }
        }
        if(count==0){
          tempForms.push(JSON.parse(JSON.stringify(temp)))
        }
      }
      this.forms=tempForms
    },
    // 删除
    deleteForm( id){
      for (let i = 0; i < this.forms.length; i++) {
        let temp = this.forms[i]
        if(temp.id==id){
          this.forms.splice(i,1)
        }
      }
    },
    // 添加
    addFormDialog(form){
      form['all']='edit'
      form['nodeId']=this.id
      this.forms.push(form)
      this.allChage(form.id)
      this.config.forms.push(form)
    },
    allChage(id){
      for (let i = 0; i < this.forms.length; i++) {
        let temp = this.forms[i]
        if(temp.id==id){
          for (let j = 0; j < temp.fields.length; j++) {
            let obj = temp.fields[j]
            obj.type=temp.all
          }
        }
      }
    }
  }
}
</script>

<style>
.c1,.c2,.c3 {
  width: 110px;
  float: left;
  padding: 0px 5px;
}
.bold {
  font-weight: bold;
  line-height: 32px;
  font-size: 18px;
  margin-bottom: 10px;
}
.line{
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  line-height: 32px;
  clear: both;
}
.form-card {
  text-align: left;
  display: block;
  clear: both;
}
.button {
  float: right;
  font-size: 12px;
}
.hiss-bg {
  background-color: #efefef;
}
</style>
